<template>
    <view class="address-list-main">
        <view v-if="Data.addressList.length" class="addr-list-container">
            <view
                v-for="(item, index) in Data.addressList"
                :key="index"
                @click.prevent="chooseAddr(item)"
                class="addr-item">
                <view class="addr-detail-container">
                    <view class="personal-mes">
                        <view class="name">{{ item.realName }}</view>
                        <view class="phone">{{ item.mobile }}</view>
                        <view v-if="item.isDefault === 1" class="default">默认</view>
                    </view>
                    <view class="addr-detail"
                        >{{ item.provinceId && item.provinceId[0] && item.provinceId[0].name
                        }}{{ item.cityId && item.cityId[0] && item.cityId[0].name
                        }}{{ item.areaId && item.areaId[0] && item.areaId[0].name
                        }}{{ item.townId && item.townId[0] && item.townId[0].name }} {{ item.street }}</view
                    >
                </view>
                <img
                    :src="getImgOssUrl('/ui-prod-2.3.0/edit@2x.png')"
                    @click.stop="operationAddr('edit', item)"
                    class="edit-addr" />
            </view>
        </view>
        <view v-else class="no-addr">
            <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
            <view class="empty_text">尚未添加收货地址</view>
        </view>
        <view class="footer">
            <view class="btn-content">
                <button @click="importAddress" class="btn btn1">导入微信地址</button>
                <button @click="operationAddr('add')" class="btn btn2">添加收货地址</button>
            </view>
        </view>
        <Loading />
        <!-- 隐私监听 -->
        <el-privacy-listener-popup></el-privacy-listener-popup>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import router from '@/router';
import { onShow } from '@dcloudio/uni-app';
import request from '@/request';
import store from '@/store';
import Loading from '@/components/el-loading';
import { getImgOssUrl } from '@/commons/utils.js';

const props = defineProps({
    origin: {
        default: '',
        type: String
    },
    from: {
        type: String
    }
});
const orderStore = store.useOrderStore();
const goodsStore = store.useGoodsStore();

const Data = reactive({
    addressList: []
});

onShow(() => {
    getAddressList();
});

const operationAddr = (type, val = {}) => {
    if (type === 'edit') {
        orderStore.editAddrMes = val;
    }
    router.push({
        path: '/pages-user/operationAddr/index',
        query: {
            addrType: type
        }
    });
};

const chooseAddr = item => {
    const { realName, mobile } = item;
    const { provinceId, cityId, areaId, townId, street } = item;
    const params = {
        name: realName,
        mobile,
        address: `${provinceId[0]?.name}${cityId[0]?.name}${areaId[0]?.name}${townId[0]?.name || ''}${street}`
    };
    if (props.origin === 'winningRecord') {
        orderStore.receiveGoodsAddr = JSON.stringify(params);
        router.back();
    } else if (props.from === 'order') {
        goodsStore.addressId = item.id;
        router.back();
    }
};

// 收货地址列表
const getAddressList = async () => {
    let res = await request('addressListServ');
    Data.addressList = res.data || [];
};

// 导入微信地址
const importAddress = () => {
    uni.chooseAddress({
        success(res) {
            const params = {
                realName: res.userName,
                mobile: res.telNumber,
                provinceId: res.nationalCode.substr(0, 2),
                cityId: res.nationalCode.substr(2, 2),
                areaId: res.nationalCode.substr(4, 2),
                townId: '',
                street: res.detailInfo,
                consigneeZip: res.postalCode,
                wechat: 2
            };
            request('saveAddressListServ', params);
        }
    });
};
</script>
<style lang="scss" src="./list.scss" scoped></style>
